<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            background: url(bgi.jpg);
        }
        .box{
            width: 1000px;
            height: 600px;
            margin: 50px 100px;
        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        li{
            overflow: hidden;
            float: left;
            width: 400px;
            height: 600px;
            background-color: #7af18a;
            margin-right: 100px;
            background-size: cover;
        }
        .a1{
          background-image: url(1.jpg);
         
        }
        .a2{
            background-image: url(2.png);
            
        }
        
        .cover{
            
            width: 400px;
            height: 600px;
            background-color: rgba(255, 0 ,230, 0.6);
            transform: rotate(90deg);
            transform-origin: bottom right;
            transition: 0.7s;
        }
        li:hover .cover{
            transform:rotate(0deg);
            
        }
            
     
        p{
           
            font-size: 14px;
            margin: 0;
            text-indent: 28px;
            line-height: 50px;
            color: #fefafa;
            padding: 10px 50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li class="a1">
                <div class="cover">
                    <p>桔梗，战国时代灵力数一数二的巫女，负责守护及净化四魂之玉，以强大的灵力与精准的箭术击退对玉虎视眈眈的妖怪们 ，
                        是犬夜叉最心爱的女子之一。后来桔梗被暗恋者鬼蜘蛛所嫉妒。
                        鬼蜘蛛托生的半妖奈落设计使二人反目成仇。重伤的桔梗忍痛将携玉逃跑的犬夜叉封印，随后带玉身亡。</p>
                </div>
            </li>
            <li class="a2">
                <div class="cover">
                    <p>犬夜叉,是大妖怪犬大将与人类公主十六夜所生的半妖，
                        因为半妖身份而被人类和妖怪所排斥，为此犬夜叉想通过四魂之玉的力量使自己变成完全的妖怪，
                        后在争夺四魂之玉中爱上了人类女子桔梗而想变成人类，后来被奈落使用离间计陷害，
                        与桔梗反目成仇，在盗取四魂之玉时，被桔梗封印五十年，桔梗带玉身亡。</p>
                </div>
            </li>
        </ul>

    </div>
</body>
</html>